<?php
include_once("includes/common.php");
include_once("class/User.class.php");
require_once("islogin.php");
$pageName = "注册";

if ($islogin==1){
    header("location:index.php");
    exit;
}
?>
<!DOCTYPE html>
<html>
<?php require_once('head.php'); ?>
<body>
<?php require_once('header.php'); ?>
<div class="container-fluid content">
    <div class="row">
        <?php require_once('menu.php'); ?>
        <div class="col watercon">
            <div class="row justify-content-center reg_content">
                <div class="login_right">
                    <div class="login_logo"><img src="static/img/logo.png" alt="" /></div>
                    <div class="login_right_title">用户注册</div>
                    <div class="login_form">
                        <form id="regForm" action="" method="post" class="form">
                            <div class="login_phone">
                                <label class="phone">
                                    <span class="country-code">+86</span>
                                    <input class="phoneInput" maxlength="11" placeholder="输入手机号" type="text" name="phone">
                                </label>
                            </div>
                            <div class="reg_pwd">
                                <label class="rpwd">
                                    <input class="pwdInput" maxlength="100" name="password" type="password" placeholder="输入密码" >
                                </label>
                            </div>
                            <div class="reg_pwd">
                                <label class="rpwd">
                                    <input class="pwdInput" maxlength="100" name="password_confirm" type="password" placeholder="输入确认密码" >
                                </label>
                            </div>
                            <div class="reg_pwd">
                                <span class="captach-show-btn">点击开始验证</span>
                            </div>
                            <div class="container-fluid captach-div" style="margin:-20px 0px 20px;display: none">
                                <div class="form-row">
                                    <div class="col-12">
                                        <div class="slidercaptcha card">
                                            <div class="card-header"><span>请完成安全验证</span></div>
                                            <div class="card-body">
                                                <div id="captcha"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="login">
                                <button class="login_btn"> 注册 </button>
                            </div>
                        </form>
                    </div>
                    <div class="login_agree">
                        <input checked="checked" class="agreements" type="checkbox" name="" id="mustcheck" />
                        <span class="agreement-text">
									我已阅读并同意<a target="_blank" href="#">《用户协议》</a><a target="_blank" href="#">《隐私政策》</a><a target="_blank" href="#">《儿童/青少年个人信息保护规则》</a>
								 </span>
                    </div>
                    <div onclick="window.location.href='login.php'" id="loginReg" class="login_reg"><img id="userIcon" src="static/img/user-gray.svg" />用户登录</div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    let uid = '';
    let apiType = '';
    let page = 1;
    let keyword = '';
    let note_type = 3;
</script>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/login.js"></script>
<script src="static/js/custom.js"></script>
<script src="static/js/message.min.js"></script>
<script src="static/js/jquery.min.js"></script>

<link href="/static/css/captcha.css"  rel="stylesheet">
<script src="/static/js/longbow.js"></script>
<link rel="stylesheet" href="/static/css/fontawesome-5.15.4/css/all.min.css">
<style>
    .slidercaptcha {
        margin: 0 auto;
        width: 314px;
        height: 286px;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
        margin-top: 40px;
    }
    .slidercaptcha .card-body {
        padding: 1rem;
    }
    .slidercaptcha canvas:first-child {
        border-radius: 4px;
        border: 1px solid #e6e8eb;
    }
    .slidercaptcha.card .card-header {
        background-image: none;
        background-color: rgba(0, 0, 0, 0.03);
    }
    .refreshIcon {
        top: -52px;
        right: -10px;
        height: 18px;
    }
</style>
<script>
    $('.captach-show-btn').click(function() {
        $('.captach-div').fadeToggle();  // 使用 slideToggle() 使 div 滑动显示/隐藏
    });

    var captcha_status = false;
    $('#captcha').sliderCaptcha(
        {
            repeatIcon: 'fa fa-redo',
            setSrc: function () {
                return ''; },
            onSuccess: function () {
                $('.captach-show-btn').css({
                    'background-color': '#52ccba',
                    'color': 'white'
                });
                $('.captach-show-btn').text('验证通过!');
                //alert('验证通过!');
                captcha_status = true;
            },
            onFail: function () {
                captcha_status = false;
                $('.captach-show-btn').css({
                    'background-color': 'red',
                    'color': 'white'
                });
                $('.captach-show-btn').text('验证失败 , 请重试!');
                // 3秒后恢复原样
                setTimeout(function () {
                    $('.captach-show-btn').css({
                        'background-color': '',  // 清除临时背景色
                        'color': ''              // 清除临时字体颜色
                    });
                    $('.captach-show-btn').text('点击开始验证'); // 恢复按钮文字
                }, 1000);  // 3000 毫秒后执行
            },
            onRefresh: function () {
                captcha_status = false;
                $('.captach-show-btn').css({
                    'background-color': '',  // 清除临时背景色
                    'color': ''              // 清除临时字体颜色
                });
                $('.captach-show-btn').text('点击开始验证'); // 恢复按钮文字
            }
        });


</script>

<script>
    /*qmsg js*/
    Qmsg.config({
        position:'right'
    });


    /*ajax api*/
    $('#regForm').on('submit', function(event) {
        event.preventDefault(); // 阻止提交

        if (!$('#mustcheck').is(':checked')) {
            Qmsg.warning("请先阅读并同意《用户协议》!");
            return;
        }

        // 获取表单数据
        var formData = $(this).serializeArray();

        var isValid = true; // 用于跟踪表单是否有效

        // 遍历每一个表单字段
        $.each(formData, function(i, field) {
            if (!field.value) { // 检查当前字段是否为空
                isValid = false;
                Qmsg.error("注册信息填写不完整！"); // 显示提示信息
                return false; // 终止循环
            }
        });

        if (!isValid){
            return;
        }

        if (!captcha_status) {
            Qmsg.warning("滑块验证码未通过!");
            return;
        }

        $.ajax({
            url: '/api/user.php?type=reg',
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                if(response.status==201){
                    Qmsg.warning(response.message);
                }else if(response.status == 202){
                    Qmsg.error(response.message);
                }else{
                    Qmsg.success("注册成功，正在前往登录界面 . . .",{
                        position:'center'
                    });
                    setTimeout(function() {
                        window.location.href = 'login.php';
                    }, 1700);
                }

            },
            error: function(xhr, status, error) {
                var err = JSON.parse(xhr.responseText);
                Qmsg.error(err)
            }
        });
    });

</script>
</body>
</html>